import { useMount } from 'ahooks';
import { Col, Row } from 'antd';
import styles from './index.module.less';
import { ImportEcharts } from './salesChart';

export default function Example() {
  useMount(() => {});
  const getChildCount = (val: string) => {
    console.log(val, 'val');
  };

  const renderSalesChart = (index) => {
    return (
      <Col span={24}>
        <ImportEcharts getCount={getChildCount} title={index} />
      </Col>
    );
  };

  const renderSalesInfo = (value) => {
    return (
      <Col span={24}>
        <h3 style={{ fontWeight: 700, margin: '15px 20px 0px' }}>{value}</h3>
      </Col>
    );
  };

  return (
    <div className={styles['page-poc-mgt']}>
      <Row style={{ marginBottom: '20px' }}>
        <Col span={12}>
          <Row
            style={{
              width: '98%',
              backgroundColor: '#F7F9FB',
              borderRadius: '20px',
            }}
          >
            {renderSalesInfo('销量达成(单位：件)')}
            {renderSalesChart('1')}
          </Row>
        </Col>
        <Col span={12}>
          <Row
            style={{
              width: '98%',
              backgroundColor: '#F7F9FB',
              borderRadius: '20px',
              marginLeft: '2%',
            }}
          >
            {renderSalesInfo('销量同比')}
            {renderSalesChart('2')}
          </Row>
        </Col>
      </Row>
    </div>
  );
}
